<template>
  <div class="call-trans" @click="defaultClick">
     <div class='transTip'>
       <el-tooltip class="item" effect="dark" :content="$t('call.tip1')" placement="bottom">
            <span>
              语音转写<span class='tipi'>?</span>
            </span>
        </el-tooltip>
        <i class='iconfont icon-shouqi1' @click="packUp"></i>
     </div>
     <div class="moreTrans" v-show="newTrans > 0" @click='newTransClick'><i class="iconfont icon-xiangshangshuangjiantou"></i>{{newTrans}}条新消息</div>
     <div class="wrapper" ref="wrapper"> 
      <ul class="content" ref='content' id="trans-content">
        <transLoading v-show="socketLoding"></transLoading>
        <div class="history" v-if="isShowHistory"><span class="historyBtn" @click.stop='addData' v-show="!hisLoading">查看历史记录</span><transLoading v-show="hisLoading"></transLoading></div>
        <callChartBox v-for="item in listData" :data='item' :transData ='transData'></callChartBox>
      </ul>
     </div>
  </div>
</template>
<script>
  import Scroll from 'better-scroll'
  import callChartBox from './call-chart-box.vue'
  import transLoading from './transLoading.vue'
  export default {
    name: 'call-trans',
    data () {
      return {
        listData: [],
        isShowHistory: true,
        hisLoading: false,
        index: 1,
        newTrans: 0,
        socketLoding: false,
        betterStop: false
      }
    },
    watch: {
      '$store.state.call.socketTransList': function(dataList) {
        if (dataList.length > 0 && this.callSheetId === this.$store.state.call.transCallSheetId) {
          // this.hisLoading = false
          this.socketLoding = false
          if (dataList[dataList.length - 1].callSheetId === this.callSheetId) {
            this.listData.push(dataList[dataList.length - 1])
          }
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new Scroll(this.$refs.wrapper, { mouseWheel: true, preventDefault: false })
              this.scroll.on('scrollEnd', (sc) => {
                console.log(sc.y)
                if (sc.y === this.scroll.maxScrollY) {
                  this.newTrans = 0
                }
              })
            }
            if (this.scroll.y > this.scroll.maxScrollY) {

              this.newTrans = this.newTrans + 1 // 新增转写数量
            } else {
              this.scroll.refresh()
              this.scroll.scrollTo(0,this.scroll.maxScrollY)
            }
          }) 
        }
      }
    },
    props: {
      callSheetId: String,
      startTime: String,
      transData:Object
    },
    components: {
      Scroll,
      callChartBox,
      transLoading
    },
    computed: {
    },
    methods: {
      addData () {
        // if (this.listData.length >= 20) {
        //   this.listData.shift()
        // }
        var that = this
        this.index = this.index + 1
        let transId = this.$store.state.call.transCallSheetId
        if (transId && transId === this.callSheetId) {
          if (this.listData.length === 0) {
            this.getTranslationRecord('socket')
          } else {
            this.getTranslationRecord()
          }
        } else {
          this.getTranslationRecord()
        }
      },
      packUp () {
        this.$emit('packUp')
      },
      defaultClick (e) {
        if (e) {
          e.stopPropagation()
        }
      },
      newTransClick () {
        this.scroll.scrollTo(0,this.scroll.maxScrollY)
      },
      getTranslationRecord (type) {
        let preH = 0
        if (this.scroll) {
          preH = document.getElementById('trans-content').offsetHeight
        }
        let query = { callSheetId: this.callSheetId }
        if (this.listData.length  === 0) {
          query.sendTime = ''
        } else {
          query.sendTime = this.listData[0].callTime
        }
        this.hisLoading = true
        this.$store.dispatch('getTranslationRecord', query).then(resp => {
          if (resp.data && resp.data.length === 20) {
            this.listData = resp.data.concat(this.listData)
          } else if (0 < resp.data.length < 20) {
            this.isShowHistory = false
            this.listData =  resp.data.concat(this.listData)
          } else {
            this.isShowHistory = false
            return
          }
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new Scroll(this.$refs.wrapper, { mouseWheel: true, preventDefault: false })
              this.scroll.on('scrollEnd', (sc) => {
                if (sc.y === this.scroll.maxScrollY) {
                  this.newTrans = 0
                }
              })
              this.scroll.on('scroll', (sc) => {
                if ((sc.y === this.scroll.maxScrollY || sc.y === 0) && !this.betterStop) {
                  this.betterStop = true
                  this.scroll.disable()
                  setTimeout(() => {
                    this.betterStop = false
                    this.scroll.enable()
                  }, 100);
                }
              })
            }
            if (!query.sendTime) {
              this.scroll.scrollTo(0,this.scroll.maxScrollY)
            } else {
              this.scroll.refresh()
              let curH = document.getElementById('trans-content').offsetHeight
              this.scroll.scrollTo(0, (preH - curH))
            }
          })
          if (type === 'socket' && resp.data.length === 0) {
            this.socketLoding = true
          }
          this.hisLoading = false
        })
      }
    },
    created () {
      this.addData()
    }
  }
</script>
<style lang='stylus' scoped>
 .history
   position relative
   margin-bottom 30px
   text-align center
 .transTip
   border-bottom 1px solid #F0F0F0
   display flex
   padding 0px 10px 0px
   height 35px
   line-height 35px
   justify-content space-between
   color #000
   .icon-shouqi1
    color #48A2E5
    margin-left 5px
    cursor pointer
   .tipi
    display inline-block
    width 14px
    height 14px
    border 1px solid #48A2E5
    text-align center
    line-height 14px
    color #48A2E5
    border-radius 50%
 .wrapper
   overflow hidden
   height 415px
 .call-trans
   height 450px
   position relative
   box-shadow 0px -1px 5px 0px #ccc inset, 0px 0px 0px 0px #3bee17 inset, 0px 0px 0px 0px #2279ee inset, 0px 0px 0px 0px #ccc inset
   .moreTrans
     .icon-xiangshangshuangjiantou
       color #459AE9
       font-size 10px
       margin-right 5px
     height 24px
     line-height 24px
     position absolute
     bottom 20px
     right 5px
     z-index 100
     background white
     color #459AE9
     padding 0 15px 0
     border-radius 12px
     box-shadow 0px 0px 4px 0px rgba(0,0,0,0.16)
   .historyBtn
     color #48A2E5
 .content
  padding 20px 15px 60px
  box-sizing border-box
</style>
<style lang="stylus" scoped>
  .list
    height 200px
    .item
      height 30px
</style>
